<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" @touchend="autoAdjust">
				<view class="circle" @click="BtnClick">
					<text class="xfBtn_text">
						<slot name="content"></slot>
					</text>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// 定义响应式变量
	const x = ref(375) // x坐标
	const y = ref(520) // y坐标
	const screenHeight = ref(0)
	const screenWidth = ref(0)

	// 定义组件事件
	const emit = defineEmits(['hangClick'])

	// 初始化获取屏幕信息
	onMounted(async () => {
		try {
			const systemInfo = await uni.getSystemInfo()
			screenWidth.value = systemInfo.screenWidth
			screenHeight.value = systemInfo.screenHeight
			// 初始化位置为右侧中间
			x.value = systemInfo.screenWidth - 60 // 减去一半宽度，避免超出屏幕
		} catch (err) {
			console.error('获取系统信息失败:', err)
		}
	})

	// 按钮点击事件
	const BtnClick = () => {
		emit('hangClick')
	}

	// 拖动结束后自动调整位置
	const autoAdjust = (e) => {
		// 限制顶部最小距离
		if (e.changedTouches[0].clientY <= 80) {
			y.value = 150
			x.value = e.changedTouches[0].clientX - 50
		}

		// 可以添加更多边界调整逻辑，比如贴边效果
		// 示例：如果靠近右侧，自动贴右
		if (x.value > screenWidth.value / 2) {
			x.value = screenWidth.value - 60 // 右侧贴边
		} else {
			x.value = 0 // 左侧贴边
		}
	}
</script>

<style lang="scss">
	$all_width: 140rpx;
	$all_height: 140rpx;

	.movable-area {
		height: 100vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		pointer-events: none; // 允许鼠标事件穿透
		z-index: 9999;

		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; // 恢复鼠标事件

			image {
				width: $all_width;
				height: $all_height;
			}
		}

		.circle {
			width: $all_width;
			height: $all_width;
			border-radius: 50%;
			background-color: transparent;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2); // 增加阴影提升质感

			.xfBtn_text {
				font-size: 30rpx;
				color: white;
				line-height: 34rpx;
				text-align: center;
			}
		}
	}
</style>